<body style="width: 100%;height: 100%">
<div class="qkc_out">
    <div class="qkc">
        <div id="main" style="width: 96%;height:580px;margin-left: 2%;padding-top: 20px"></div>
    </div>
</div>
</body>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    var option = {
        title: {
            x: 'center',
            text: '收支对比情况'
        },
        // tooltip: {
        //     trigger: 'axis'
        // },
        color:['#2F4554','#C23531'],
        xAxis: {
            type: 'category',
            show:false,
            data: ["2017-12-20","2017-12-20","2017-12-20","2017-12-20","2017-12-20","2017-12-20","2017-12-20"]
        },
        yAxis: {
            show:false},
        toolbox: {
            feature: {
                restore: {},
                saveAsImage: {}
            }
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series : [
            {
                type: 'pie',    // 设置图表类型为饼图
                radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                data:[          // 数据数组，name 为数据项名称，value 为数据项值
                    { value: 1048, name: '收入金额' },
                    { value: 735, name: '支出金额' },
                ]
            }
        ],
        dataZoom: [
            {   // 这个dataZoom组件，默认控制x轴。
                type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                start: 0,      // 左边在 10% 的位置。
                end: 100         // 右边在 60% 的位置。
            }
        ],
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
<style>
    .qkc{
        margin-left: 160px;
        margin-right: 160px;
        height: 610px;
        background-color: white;
    }
    .qkc_out{
        height: 610px;
        width: 100%;
        background-color: #E6EBF5;
    }
</style>
</html>